<template>
  <div id="app" v-cloak flex="dir:col">
    <transition name="fade">
      <div>
        <div class="nav-side" @click="value = true">
          Enter
        </div>
        <b-drawer v-model="value" title="Shader列表" append-to-body :closable="false">
          <div class="position-wrapper">
            <router-link to="/home">Home</router-link>
            <router-link to="/1">NetEarth</router-link>
            <router-link to="/2">ShaderAnnulus</router-link>
            <router-link to="/3">ShaderCircle.vue</router-link>
            <router-link to="/4">ShaderFlat.vue</router-link>
            <router-link to="/5">ShaderInThree.vue</router-link>
            <router-link to="/6">ShaderKabi.vue</router-link>
            <router-link to="/7">ShaderNet.vue</router-link>
            <router-link to="/8">ShaderVortex.vue</router-link>
          </div>
        </b-drawer>
      </div>
    </transition>
    <transition :name="transitionName">
      <router-view class="child-view" flex-box="1" flex="dir:col" />
    </transition>
  </div>
</template>
<script>

  export default {
    name: 'app',
    watch: {
      '$route' (to, from) {
        //    console.log('现在路由:',to.path.split('/')[1],'来自路由:',from.path.split('/')[1],'现在的动画:',this.transitionName)
        const toDepth = to.path.split('/').length
        const fromDepth = from.path.split('/').length
        this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
      }
    },
    data() {
      return {
        router: this.$router,
        transitionName: 'slide-left',
        value: true
      }
    },
    methods: {

    }
  }
</script>
<style lang="stylus">
  [v-cloak] {
    display: none;
  }

  html, body
    width: 100%
    height: 100%
    padding: 0
    margin: 0

  #app
    background-color: #16171c
    width: 100%
    height: 100%
    color #fff

  .border-box
    border: 1px solid #232831
    margin: 8px
    padding: 10px
    overflow hidden
    box-sizing: border-box
    position relative

  .num-box
    padding 10px 0 2px
    i
      &.num
        display inline-block
        vertical-align bottom
        font-size: 30px
        color #ffffff
        background-color: #c96857
        margin 0 4px
        padding 4px 10px
        -webkit-border-radius: 2px
        -moz-border-radius: 2px
        border-radius: 2px

  .bb-title
    position absolute
    z-index 20
    top: 10px
    left: 2px
    font-size: 18px
    font-weight: 700
    padding-left: 16px
    border-left: 4px solid #1d69cc

  .table-container
    height: 100%
    width: 100%
    position absolute
    top: 0
    left: 0
    box-sizing border-box
    padding-top: 40px
    overflow hidden
    .table
      overflow hidden
      width: 100%
      position relative
      padding-top: 40px
      .table-header
        position absolute
        top: 0
        left: 0
        width: 100%
        height: 40px
        background-color: #20242d
        padding 0 20px
        line-height: 40px
        box-sizing border-box
      .swiper-wrapper
        width: 100%
        .slide-item
          height: 30px
          &:nth-child(even)
            background-color: #20242d
          .row
            box-sizing border-box
            padding 0 20px
            display flex
            justify-content space-between
            align-items center

  .fade-enter-active, .fade-leave-active
    transition: opacity .5s;
  .fade-enter, .fade-leave-to
    opacity 0
  .child-view
    transition: all .5s cubic-bezier(.55,0,.1,1);
  .slide-left-enter, .slide-right-leave-active
    opacity: 0;
    transform: translate(30px, 0);
  .slide-left-leave-active, .slide-right-enter
    opacity: 0;
    transform: translate(-30px, 0);

  .shader-bg
    width: 100%
    height: 100%

.nav-side
  position absolute
  left: 2%
  top: 4%
  z-index 10
  display block
  height: 100px
  width: 100px
  line-height: 90px
  text-align center
  font-size: 30px
  box-sizing border-box
  -webkit-border-radius: 50%
  -moz-border-radius: 50%
  border-radius: 50%
  border: 4px solid #fff
.position-wrapper
  display flex
  flex-direction column
</style>
